import { Component } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: './todos01.component.html',
  styleUrls: ['./todos01.component.css'],
})
export class Todos01Component {
  // 任务列表
  todos = [
    { id: 1, tname: '起床', done: true },
    { id: 2, tname: '洗漱', done: true },
    { id: 3, tname: '晨练', done: false },
    // 列表删除
    { id: 4, tname: '早餐', done: false },
    { id: 5, tname: '上班', done: false },
  ];
  /**
   * 任务名称
   */
  todoName = '';
  /**
   * trackBy方法
   */
  trackByTodo(index: any, todo: any) {
    return todo.id;
  }

  /**
   *1. 添加任务
   */
  addTodo() {
    // 初始化id
    let id;
    // 非空判断
    if (this.todoName === '') {
      return;
    }

    /**
     * 取数组中的id值
     */
    if (this.todos.length === 0) {
      id = 1;
    } else {
      id = this.todos[this.todos.length - 1].id + 1;
    }

    // console.log('添加任务触发', this.todoName);
    this.todos.push({
      // id:id,
      id,
      tname: this.todoName,
      done: false,
    });

    /**
     *添加完后请空输入框内容
     */
    this.todoName = '';
  }

  /**
   *2. 任务删除
   */
  delTodo(e: any, id: any) {
    //阻止<a>标签的默认行为(/#)被触发
    // http://XXXXXX:XXXX/#
    e.preventDefault();
    // console.log('删除任务触发', id);
    // console.log(this.todos.filter(todo => todo.id !== id));
    // 使用数组中filter()方法,对删除项进行过滤,保留未删除项.
    this.todos = this.todos.filter((todo) => todo.id !== id);
  }

  /**
   *切换任务状态
   */
  changeTodo(id: any) {
    // console.log('切换任务触发', id);
    // console.log(this.todos.find((todo) => todo.id === id));
    //使用数组中find()方法,查找当前项,并对done取反.
    const currTodo: any = this.todos.find((todo) => todo.id === id);
    currTodo.done = !currTodo.done;
  }
}
